<template>
  <el-tree-select v-model="deptId" :data="deptOptions"
    :props="{ value: 'deptId', label: 'deptName', children: 'children' }" value-key="deptId" placeholder="选择部门"
    check-strictly></el-tree-select>
</template>

<script setup lang="ts">
import { defineModel } from 'vue';
import { DeptVO } from '@/api/system/dept/types';
import { UserVO } from '@/api/system/user/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import useDeptStore from '@/store/modules/dept';

const deptStore = useDeptStore();

interface DeptOptionsType {
  deptId: number | string;
  deptName: string;
  children: DeptOptionsType[];
}

interface DeptOptionsType {
  deptId: number | string;
  deptName: string;
  children: DeptOptionsType[];
}



const deptList = ref<DeptVO[]>([]);
const loading = ref(true);
const deptOptions = ref<DeptOptionsType[]>([]);
const deptId = defineModel('deptId', {
  type: Number,
  default: 0,
});

const getList = async () => {
  loading.value = true;
  const data = deptStore.getDept();
  deptList.value = data;
  deptOptions.value = proxy?.handleTree<DeptOptionsType>(data,'deptId');  
};

onMounted(() => {
  getList();
});

</script>

<style scoped></style>
